/*___________Design Info & Resources________________

Dark Outline Color | #333333 (dark gray)
Subtle background color | #f2f2f2 (beige) 
Activity Button and Accent Color | #7c7ebf (dusty purple)

Section Banners: 
Example Sections | #A9CEF4 (light blue) - icon_example.png, icon_example2.png
Practice Sections | Activity | Level Up | #7c7ebf (dusty purple) 
  - icon_practice.png, icon_practive2.png, activity.png, level_up.png, level_up_again.png
Video Section | #6E97BE (pale navy) - icon_video.png
Lesson Content | #6E97BE (pale navy) - icon_lesson.png
Review Sections | #6E97BE (pale navy) - icon_review.png
Extra/Other Sections | #6E97BE (pale navy) - icon_more.png

Buttons: 
Hint? | #FFCB47 (faded gold) - hint.png
Tip? | #F47B50 (faded orange) - tip.png
Why? | Check #34ABA6 (teal) -why.png. check.png
Reason? | Solution? | Answer? - question_mark.png
Study Guide | #6E97BE (pale navy) - study_guide.png 
  (with video.. adjust color to section as needed)

Slide-show: 
Background color| #f2f2f2 (beige)
Arrows | arrow_left.png, arrow_right.png (#7c7ebf - dusty purple)

Icons:
Click | click.png
Green Check Mark | correct.png
Red 'X' | incorrect.png
Quote | quote.png
______________________________________________________*/

/* -------- General Styles --------- */
h1, h2, h3 {
  color: #333333;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 1.85em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.05em;
}

a {
  text-decoration: none;
}

button:focus {
  outline:0;
}

ul {
  list-style: none;
}

/* --- END General Styles--- */


/* --------- Buttons --------- */
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-shrink: 0; 
    margin: 10px;
    width: 180px;
    font-size: 1.8em;
    font-family: arial, sans-serif;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: .05s;
  }

  .button img {
    margin-left: -5px;
  }

  .button p {
    margin: 10px;
  }

  .button:hover {
    transition: .05s;
    border-radius: 15px;
  }
/* --- END buttons--- */


/* -------- Section Banners --------- */
  .banner {
    display: flex; 
    justify-content: flex-start; 
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
    margin: 10px 0px;
  }
/* --- END Section Banners--- */

/* -------- Hint & Tip boxes -------- */
  /* -------- Hint & Tip Reveal -------- */
    .hint {
      margin: 10px 0px;
      width: 100%;
      cursor: pointer;
    }

    .hint p {
      margin-right: 10px; 
      padding: 5px 10px; 
      border-left: 3px solid #FFCB47;
    }

    .tip {
      margin: 10px 0px;
      width: 100%;
      cursor: pointer;
    }

    .tip p {
      margin-right: 10px; 
      padding: 5px 10px; 
      border-left: 3px solid #F47B50;
    }
  /* -------- END Hint & Tip Reveal -------- */

/* -------- Hint & Tip Pop-Up -------- */
  .modal {
    display: none; 
    position: fixed; 
    z-index: 199; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
  }

  /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s;
    }

    #myBtn {
      border: none;
      background-color: white;
      cursor: pointer;
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }

    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
      color: #333333;
      float: right;
      font-size: 28px;
      font-weight: bold;
      padding-right: 10px;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-header {
      background-color: #ffd933;
      color: white;
    }


    .modal-body {
      display: flex;
      margin-right: -15px;
      align-items: center; 
      justify-content: flex-start;
      flex-shrink: 0;
      flex-direction: row;
    }
    /* -------- END Hint & Tip Pop-Up -------- */  
/* --- END Hint & Tip boxes--- */


/* -------- Basic Calculator -------- */
  .calculator form {
    width: 350px;
    margin: 15px;
  }
  .calculator .basic_calculator {
    margin: auto;
    background-color: #f2f2f2;
    width: 295px;
    max-width: 295px;
    height: 325px;
    
    border-radius: 4px;
    padding-right: 10px;
  }

  .calculator input {
    outline: 0;
    position: relative;
    left: 5px;
    top: 5px;
    border: 0;
    color: #333333;
    background-color: white;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px rgba(0,0,0,0.2);
    margin-bottom: 15px;
  }

  .calculator input:hover {
    border: 0 solid #000;
    background-color: #fff;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px #b0d2cf;
  }

  .calculator input:active {
    top: 4px;
    border: 0 solid #000;
    color: #495069;
    background-color: #fff;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: none;
  }

  .calculator #display {
    width: 280px;
    max-width: 280px;
    font-size: 26px;
    text-align: right;
    background-color: white;
    padding: 5px;
  }

  .calculator #display:hover {
    border: none;
    margin-bottom: 15px;
    background-color: white;
    box-shadow: 0 4px rgba(0,0,0,0.2);
  }

  .calculator .operator {
    background-color: #cee9ea;
    position: relative;
  }

  .calculator .operator:hover {
    background-color: #cee9ea;
    box-shadow: 0 4px #b0d2cf;
  }

  .calculator .operator:active {
    top: 4px;
    box-shadow: none;
  }

  .calculator #clear {
    float: left;
    position: relative;
    display: block;
    background-color: #ff9fa8;
  }

  .calculator #clear:hover {
    float: left;
    display: block;
    background-color: #F297A0;
    margin-bottom: 15px;
    box-shadow: 0 4px #CC7F86;
  }

  .calculator #clear:active {
    float: left;
    top: 4px;
    display: block;
    background-color: #F297A0;
    margin-bottom: 15px;
    box-shadow: none;
  }
  /* ---END Basic Calculator--- */

  /* ---Slide Show--- */
    .slide_show {
      width: 700px; 
      background-color:#f2f2f2;  
      border-radius: 4px; 
      -moz-border-radius: 20px; 
      padding: 10px;
    }

    .slide {
      display: flex; 
      align-items: center; 
      justify-content: center;
      flex-shrink: 0; 
      flex-direction: column;   
    }

    .slide_button {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      flex-shrink: 0; 
      margin: 10px;
      width: 180px;
      font-size: 1.8em;
      font-family: arial, sans-serif;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .slide_button img {
      margin-left: -5px;
    }

    .slide_button p {
      margin: 10px;
    }

    .slide_button:hover {
      border-radius: 15px;
    }
  /* ---END Slide Show--- */

  /* ---Vertical Tab Set--- */
    .v_tab {box-sizing: border-box}
  
  /* Style the tab */
    .tab {
      float: left;
      background-color: #f2f2f2;
      width: 30%;
      height: 300px;
    }

    /* Style the buttons inside the tab */
    .tab button {
      display: block;
      background-color: inherit;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;
      cursor: pointer;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
      background-color: #ddd; 
    }

    /* Create an active/current "tab button" class */
    .tab button.active {
      background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
      float: left;
      padding: 0px 12px;
      width: 70%;
      border: none;
      border-left: none;
      height: 300px;
    -webkit-animation: fadeEffect 1s;
      animation: fadeEffect 1s;
    }

    /* Fade in tabs */
    @-webkit-keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
    }

    @keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
    }
  /* ---END Vertical Tab Set--- */


  /* ---Accordian: Alternative to slide show or tab sets--- */
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
  /* ---END Accordian--- */

  /* ---Horizontal Tab Set--- */
    /* Style the tab */
      .h_tab {
        overflow: hidden;
        background-color: #f2f2f2;
      }

      /* Style the buttons inside the tab */
      .h_tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

      /* Change background color of buttons on hover */
      .h_tab button:hover {
        background-color: #ddd;
      }

      /* Create an active/current tablink class */
      .h_tab button.active {
        background-color: #ccc;
      }

      /* Style the tab content */
      .h_tabcontent {
        display: none;
        padding: 6px 12px;
        animation: fadeEffect 1s; /* Fading effect takes 1 second */
      }

      /* Go from zero to full opacity */
      @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
      } 
  /* ---END Horizontal Tab Set--- */


  /* ---Text Emphasis Box--- */
    .text-em {
      display: flex; align-items: 
      center; justify-content: center;
      flex-direction: column; 
      background-color: #f2f2f2; 
      margin: 15px 50px 25px 50px; 
      border-left: 5px solid #41c28c;  
      border-right: 5px solid #41c28c;
    }

    .text_em_def{
      display: flex; 
      align-items: center; 
      justify-content: flex-start; 
      flex-direction: row; 
      background-color: #ccc; 
      padding: 5px; 
      width: 100%;
    }

    .text-em img {
      margin: 0px 10px;
    }
  /* ---END Text Emphasis Box--- */

    
  /* ---Multiple Choice Interactive--- */
    div.answers.feed_back {
      border: none;
      width: auto;
      background-color: #f6f6f6;
      padding: 5px;
      box-shadow: inset 0px 0px 5px #ccc;
    }

    div.multiple_choice {
      border-radius: 0px; 
      background-color: #f2f2f2;
      width: 600px;
    }
            
    div.multiple_choice div.responses ol li, 
    div.multiple_choice div.responsesMA ol li {
      font-weight: normal;
      color: #333333;
    }

    div.multiple_choice div.responses ol li:hover, 
    div.multiple_choice div.responsesMA ol li:hover,{
      font-weight: bold;
    }

    div.multiple_choice div.review {
      height: 53px;
      width: 100px;
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/review.png);
    }

    div.multiple_choice div.next {
      height: 53px;
      width: 100px;
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/next.png);
    }
  /* ---END Multiple Choice Interactive--- */

  /* ---Math Problem Test Interactive--- */
    div.math-container p {
      margin: 10px;
      color: #333333;
      }

      .math-container {
        min-width: 650px;
        background: #f2f2f2;
        padding: 15px;
      }

      .math-inner {
        display: flex;
        justify-content: center;
      }

      .math-inner-end {
         justify-content: space-between;
      }

      .math-block {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: white;
        margin: 15px;
        margin-top: 0px;
      }

      .math-block img{
        margin: 10%;
        width: 80%;
        height: auto;
      }

      .math-problem {
        width: 100%;
        min-height: 80px;
        margin: 10px;
        padding: 5px;
        background-color: #ddd;
      }

      .math-problem-inner strong {
        color: #333333;
      }

      .math-problem-inner {
        display: flex;
        align-items: center;
      }

      #math-solution-list {
        list-style: none;
        margin: 0;
        padding: 10px;
      }

      #math-solution-list li {
        margin: 10px;
      }

      #math-solution-list li:hover {
        cursor: pointer;
        font-weight: bold;
      }
        
      .math-correct-banner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        font-size: 2em;
        font-weight: bold;
        background: rgba(200,200,200, .7);
      }

      .math-incorrect-banner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        font-weight: bold;
        font-size: 2em;
        background: rgba(200,200,200, .7);
      }

      .math-correct-banner p, .math-incorrect-banner p {
        margin-top: 75px;
        text-align: center;
      }
        
      .math-answer {
        }

      .math-start-text:before {
        content: " ";
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #7c7ebf;
        width: 100%;
        height: 100%;
        color: white;
        font-weight: bold;
        background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/click.png);
        background-size: 55px; 
        background-repeat: no-repeat;
        background-position: center;
      }

      .math-start-text:hover {
        cursor: pointer;
        font-size: 1.15em;
      }

      .math-problem-set {
        display: none;
      }

      .math-current {
        display: block;
      }

      .math-btn {
        width: 48px;
        height: 48px;
        margin: 15px;
        border-radius: 50px;
        color: #7c7ebf;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 35pt;
      }

      .math-btn:hover {
        cursor: pointer;
        color: white;
        background-color: #7c7ebf;
      }

      .math-problem-set .final {
        height: 600px;
        min-width: 650px;
        z-index: 100;
        background: #f2f2f2;
        font-weight: bold;
        font-size: 25pt;
        padding: 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .final small {
        font-size: 20pt;
      }
      .final:hover {
        cursor: pointer;
      }

      .sm {
        min-height: 50px;
         width: 23%;
      }
        
      .sm:nth-child(1) {
        margin-right: -4px;
      }
        
      .md {
        min-height: 100px;
        width: 48%;
      }

      .lg {
        min-height: 250px;
        width: 48%;
      }
        
      .xl {
        width: 100%;
        min-height: 100px;
      }

      .label{
        font-weight: bold;
        min-height: 40px;
        margin: 5px 10px 0 10px;
        color: #0f6399;
      }
        
      .label:nth-child(3) {
        padding-left: 10px;
      }

      #cboxTitle {
        padding-right:30px;
        text-align: left;
        top: auto;
        width: auto;
      }

      .cboxPhoto {
        float: left !important;
        padding-bottom:10px; /* Edit this to change caption space */
      }
  /* ---END Math Problem Test Interactive--- */

  /* ---MisMatch Interactive--- */
    div.mismatch_game {
      box-shadow: 3px 3px 3px #ccc; 
      border-radius: 2px;
      border:none;
      background: transparent;;
      background-color: #f2f2f2;
    }

    #mmTitle {
      height: auto;
      color: #333333;
      border: 1px solid #333;
      box-shadow: 1px 1px 3px #777;
    }

    .mmChoice {
      min-height: 40px;
    }

    .mmChoice:hover {
      border-color: #7c7ebf;
      border-radius: 5px;
      box-shadow: 2px 2px 3px #777;
    }
        
    .mmFeedback {
      background-color: white;
      box-shadow: inset 0px 0px 5px #ccc;
      padding: 5px;
      font-size: 1.1em;
    }

    .mmNext {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/next.png);
      background-size: 60px;
      background-repeat: no-repeat;
    }

    .mmNext:hover {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/next.png);
      background-size: 60px;
    }

    .mmRetry {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/retry.png);
      background-size: 60px;
    }

    .mmRetry:hover {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/retry.png);
      background-size: 60px;
    }
  /* ---END MisMatch Interactive--- */

    
  /* ---Matching Interactive--- */
    #matchingV2 {
      background-image: none;
      background-color: #f2f2f2;
      border-radius: 0px;
      border: none;
    }

    #matchDir,  #matchCheck, #matchReset {
      font-family: Arial, sans-serif;
      background-color: #7c7ebf;
      font-weight: bold;
      color: #333;
    }

    #matchDir:hover, .matching_alg2 #matchCheck:hover, #matchReset:hover {
      border-radius: 8px;
      transition: .05s;
    }

    .matchItem div.item,  .matchAnswers div.answer {
      min-height: 25px;
    }

    .matchItem .item:hover, .matchAnswers .answer:hover {
      background-color: rgb(255, 255, 204); 
      border:2px solid #7c7ebf;
    }

    #matchDirections {
      background-color: #7c7ebf;
    }
  /* ---END Matching Interactive--- */


  /* --Flash Card Interactive --*/
    .flashcards_elem {
      background-color: #f2f2f2;
      background-image: none;
      border-radius: 0px;
      box-shadow: 3px 3px 3px #ccc;
    }

    .f1_fake {
      border: none;
      border-radius: 5px;
      background-color: #7c7ebf; 
      background-image: none;
    }

    .f1_card {
      border: none;
      border-radius: 2px;
    }

    .face {
      border-radius: 2px;
    }

    .face.back {
      background: white;
    }

    .face.front {
      font-size: 1.15em;
  }

    .fc_prevbtn {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/fc_back.png);
    }

    .fc_nextbtn {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/fc_next.png);
    }

    .fc_removebtn {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/remove.png);
    }

    .fc_retrybtn {
      background-image: url(https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/Jenns_Assets/math_icons/retry_white.png);
    }

    .fc_prevbtn:hover, .fc_nextbtn:hover, .fc_removebtn:hover {
      margin: 3px 5px -3px 5px;
    }

    .fc_retrybtn:hover {
      margin: 25px auto 25px auto;
    }
  /* END Flash Card Interactive --*/

  /* -- Flip-Box Feature --*/

  .flip-box {
    background-color: transparent;
    margin: 10px;
    height: 100%;
    width: 100%;
    cursor: pointer;
    perspective: 1000px;
  }

  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .flipped .flip-box-inner {
    transform: rotateX(180deg);
  }

  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: perspective(1px) translateZ(0);
  }

  .flip-box-front {
    background-color: transparent;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
  }

  .flip-box-back {
    background-color:transparent;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
    transform: rotateX(180deg);
  }

  /* -- END Flip-Box Feature --*/

  /* ---Images--- */
  .small_img {
    border-radius: 3px; 
    box-shadow: 3px 3px 3px #ccc; 
    margin: 10px;
    flex-shrink: 0;
  }
  /* ---END Images--- */

/*
  * Hide only visually, but have it available for screen readers:
*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}